$(function () {
    var test_span;
  function setBasicInfo(data) {
      var status;
      if(data.status==0)
          status=' <span class="label label-warning">'+gettext('Unconducted')+'</span>';
      else if (data.status==1)
          status=' <span class="label label-success">'+gettext('Running')+'</span>';
      else if (data.status==2)
          status=' <span class="label label-primary">'+gettext('Completed')+'</span>';
      else
          status=' <span class="label label-danger">'+gettext('Failure')+'</span>';
      $('#t-title').text(data.vr_task_title || '— —');
      $('#t-time').text(data.created_time || '— —');
      $('#t-author').text(data.author || '— —');
      $('#t-status').html(status);
      var train_result=data.train_result;
      var train='';
      if(train_result!=null){
          var train_keys=Object.keys(train_result);
          train_keys.forEach(function (value) {
              train+=value+':'+train_result[value]+'; ';
          })
      }
      else{
          train='— —';
      }
      $('#t-train').text(train);
      // $('#t-test').text(data.test_result || '— —');
      var test_result=data.test_result;
      var test='';
      if(test_result!=null){
          test='<span class="label label-primary">'+gettext('Predicted tag')+
              '&nbsp;<i class="fa fa-question-circle-o" aria-hidden="true" title="'+gettext('Click test class to view details.')+'"></i></span>';
          // test=gettext('Predicted class tag of test set, click test class to view details.');
      }
      else{
          test='— —'
      }
      $('#t-test').html(test);
  }

  function setClassesInfo(data) {
      var classes=$('#classes');
      var obj='';
      if (data.length!=0){
          // var obj_st='<dt> </dt><dd><b>Class Title</b><b>Num of Pictures</b><b>Desciption</b></dd>';
          var head='<table class="bx--data-table-v2">'
                  +'<thead><tr><th></th><th>'+gettext('Class')+'</th><th>'+gettext('Images')+'</th><th>'+gettext('Description')+'</th><th>'+gettext('Preriew')+'</th></tr></thead>';
          var body='';
          $.each(data, function (i, it) {
              // var obj='<dt>'+(i+1)+'</dt>'
              //     +'<dd id="t-class-title">'+it.class_title+'</dd>'
              //     +'<dd id="t-class-num">'+it.num_of_pictures+'</dd>'
              //     +'<dd id="t-class-desc">'+it.description+'</dd>';
              // var obj='<dt>'+(i+1)+'</dt><dd>'+it.class_title+it.num_of_pictures+it.description+'</dd>';
              body+='<tbody><tr><td>'+(i+1)+'</td><td>'+it.class_title+'</td><td>'+it.num_of_pictures+'</td><td>'+it.description+'</td>'
                  +'<td><input name="class-ids" type="radio" value="'+it.id+'"></td></tr></tbody>';
              // <button type="button" class="btn btn-primary" title="'+gettext('Preview')+'"><i class="fa fa-chrome" aria-hidden="true"></i></button>
          });
          obj=head+body+'</table>';
      }
      classes.prepend(obj);
    }

    var tid=window.location.href.split('/').pop();
    // console.log(tid);
    $.requestJSON({
        method: 'GET',
        // url: Urls.resolve('mlplatform_api_v1:task_detail', {pk: window.location.href.split('/').pop()}),
        url: Urls.resolve('mlplatform_api_v2:vr_task_one'),
        param:{
            vrtask_id:tid
        },
        onSuccess: function (json) {
            setBasicInfo(json.data.vrtask);
            setClassesInfo(json.data.classes);
            test_span=json.data.vrtask.test_result;
            // console.log(json.data.model.length);
            if(json.data.model.length!=0){
                $('#t-model').text(json.data.model[0].title);
            }
            else{
                $('#t-model').text('— —');
            }
        },
        onError: function () {
            window._jqHandled = true;
        }
    });

    function setClassImagesInfo(data){
        $('.class-div').show();
        // console.log(data);
        $('#class-id').text(data.class_title);
        $('#images-num').text('('+data.num_of_pictures+')');
        var ul=$('#img-ul');
        ul.empty();
        var img='';
        if(data.class_title=='test' & test_span!=null){
            $.each(data.images_path,function (i,it) {
                img+='<li><img src="/media/'+it+'" alt=""><span style="font-size: 5px">'+test_span[i]+'</span></li>'
            });
        }
        else{
            $.each(data.images_path,function (i,it) {
                img+='<li><img src="/media/'+it+'" alt=""><span style="font-size: 5px"> </span></li>'
            });
        }
        ul.append(img);
    }

    $(document).on("click",".bx--data-table-v2 tbody tr",function(){
        var now_class=$(this).find('input');
        now_class.prop("checked",true);
        // console.log(now_class.attr("checked"));
        var now_class_id=now_class.attr('value');
        // alert(now_class_id);
        var tr= $("tbody").find("tr");
        // console.log(tr.length);
        tr.css("background-color","#ffffff");
        $(this).css("background-color","#DFE3E6");
        if(now_class_id!=null){
            $.requestJSON({
                method: 'GET',
                url: Urls.resolve('mlplatform_api_v2:class_asset_one'),
                param:{
                    class_asset_id:now_class_id
                },
                onSuccess: function (json) {
                    // console.log(json);
                    setClassImagesInfo(json.data);
                },
                onError: function () {
                    window._jqHandled = true;
                }
            });
        }

    });

});